Interactive Presentation

Using Observable

Oliver

Interactive Visualizations

My summary from 11/Feb/2023

Interactive visualizations are best made with html.
Presentation Tools
- Powerpoint and google-docs do not consistently allow to embed HTML
- Quatro
  - Can an embed HTML nicely
  - Nice presentation with https://revealjs.com (pdf and standallone html OK)
- Other
  - https://slides.com/ (not checked yet)
Interactivity
- html_widgets (not all widgets work)
- Shiny (needs server)
- Observable.js (nice interactive alternative) not yet 100% sure what happens

Observable (Development)

Workflow

Observable.js is java script library for interactivity. Best way is to develop them on a website called

https://observablehq.com/ (head quarter)

You can then include the code via copy&paste into the cell (or) do it differently.

Observable (Resources)

Observable

Is like a reactive framework. Variables listen to their changes and can be used before they are defined. It can be easily used with quatro (also to make interactive slides).

The cool thing is that you can include functions from the community very easily. The following code downloads the summary-table

import { SummaryTable } from "@observablehq/summary-table"

Importing the data and visualizing

This is the data in R:

To use the data in observable

  ojs_define(datt = dat)
  #Ignore the error msg
  # To write data which can be used later in obersvableHQ
  #write.csv2(american.woman, "~/Downloads/data.csv", row.names = FALSE)

dat = transpose(datt)
  Inputs.table(dat)

Importing from the cloud

It has been uploaded a while ago into ObservableHQ and can be used from there via the following command

import {american1Woman} from "50b32fe191bd30ce"

Click on the car to filter. The right table will update

To create a dynamic variable you can use viewof and a imput widgets, see.

viewof table = Inputs.table(american1Woman)

SummaryTable(table)

Plot

viewof b = Inputs.range([-10, 120], {label: "Intercept", step: 0.1})
viewof w = Inputs.range([-5, 5], {label: "Slope", step: 0.1})


Plot.plot({
  marks: [
    Plot.dot(dat, {x: "x", y: "y"}),
    Plot.line(curve(dat), {x: "x", y: "y"})
  ]})

function curve(template){
  const ages = template.map(d => d.x);
  const [minAge, maxAge] = d3.extent(ages);
  const xvals = d3.range(minAge, maxAge, (maxAge - minAge) / 100); 
  let yhat = xvals.map(x => w*x + b);
  return xvals.map((x, i) => ({x, y: yhat[i]})); //Thanks ChatGPT
}